<template>
    <rx-fit>
        <div class="itmsFont">
            <ul class="ithear">
                <li :class="[curMenus_id == index? 'hoverli':'']" v-for="(menu, index) in curMenus"
                    @click="hanlick(index,menu)">{{ $i18(menu.title, "菜单标题") }}
                </li>
            </ul>
            <ul class="item-cong">
                <li @click="handMenuClick(list)" v-for="list in curMenus_li" class="item-li">
                    <div class="item-icon-box">
                        <i class="iconfont " :class="JSON.parse(list.icon).icon"></i>
                        <a-icon :type="JSON.parse(list.icon).icon"></a-icon>
                    </div>
                    <p>
                        <span class="spanlist">{{ list.title }}</span>
                    </p>
                </li>
            </ul>
        </div>
    </rx-fit>
</template>

<script>
import {RxFit, Util} from "@lowcode/jpaas-common-lib"
import OsUserApi from '@/api/user/org/osUser'
import DialogView from '@/layouts/DialogView'
import {getComponent, getColumnlist, getSelectMenus} from '@/utils/routerUtil'
import {mapMutations, mapState} from 'vuex'

export default {
    name: 'MenuViewFun',
    props: {
        menuId: String,
    },
    components: {
        RxFit,
    },
    computed: {
        ...mapState({
            menuStyle: (state) => state.appSetting.menuStyle,
            menuMap: (state) => state.appSetting.menuMap,
            selectedKeys: (state) => state.appSetting.selectedKeys,
            rootPath: (state) => state.user.rootPath,
            navigation: (state) => state.appSetting.navigation,
            activeKey: (state) => state.appSetting.activeKey,
            appKey: state => state.appSetting.appKey,
            menus: (state) => state.appSetting.menus,
            appmenuId: (state) => state.appSetting.appmenuId,
            frontType:state => state.appSetting.frontType
        }),
        navTabs(){
            return this.navigation[this.frontType];
        }
    },
    data() {
        return {
            curMenus: [],
            alert: '',
            curMenuId: this.menuId,
            curMenus_li: [],
            curMenus_id: '0'
        }
    },
    created() {
        this.initMenus()
    },
    watch: {
        appmenuId() {
            this.initMenus()
        }
    },
    methods: {
        ...mapMutations('appSetting', [
            'setMenuPath',
            'setSelecteKeys',
            'setOpenKeys',
            'setNavigation',
            'setActiveKey',
            'setBreadList',
            'setAppMenuId',
        ]),

        initMenus() {
            this.curMenuId = this.appmenuId
            // if (!this.curMenuId) {
            //   this.curMenuId = this.appmenuId
            // }
            this.curMenus = getSelectMenus(this.menus, this.curMenuId)
            if (this.curMenus[0].children) {
                this.curMenus_li = this.curMenus[0].children
            }
        },
        hanlick(index, menu) {
            this.curMenus_id = index;
            this.curMenus_li = menu.children;
        },
        handMenuClick(item, index) {
            //添加面包屑
            this.handNavBars(item)
            var showType = item.showType;
            if (!showType || showType == 'URL') {
                //URL访问
                this.openUrl(item)
            } else if (showType == 'POP_WIN') {
                //弹窗
                this.openPopWin(item)
            } else if (showType == 'NEW_WIN') {
                //新窗口
                this.openNewWin(item)
            } else if (showType == 'FUNS') {
                //功能面板集（标签）
                this.openFuns(item, 'funs')
            } else if (showType == 'FUNS_BLOCK') {
                //功能面板集（单页）
                this.openFuns(item, 'funsBlock')
            } else if (showType == 'FUN') {
                //功能面板
                this.openFuns(item, 'fun')
            }
        },
        openPopWin(item) {
            var conf = {
                component: DialogView,
                curVm: this,
                max: true,
                title: this.$i18(item.name),
                data: {currentView: getComponent(item), menu: item},
            }
            Util.open(conf)
        },
        openNewWin(item) {
            var path = process.env.VUE_APP_ADMIN_FRONT;
            var aryMenuPath = this.getMenuPath(item.id)
            var url = this.rootPath + path;
            for (var i = 0; i < aryMenuPath.length; i++) {
                if (i == 0) {
                    url += '/' + aryMenuPath[i].menuKey + '/home';
                    continue;
                }
                url += '/' + aryMenuPath[i].menuKey;
            }
            window.open(url, '_blank')
        },
        openUrl(item) {
            var name = item.key
            var pathParams = {name: name}
            if(item.appType=='1'){
              pathParams.query={appId:item.appId};
            }
            this.setSelecteKeys([item.key])
            pathParams.params = {menuId: item.id}
            if (item.params) {
                pathParams.params.params = item.params
            }
            this.setAppMenuId(pathParams.params.menuId)
            this.generatePath(item.id)
            this.$router.push(pathParams)
        },
        openFuns(item, name) {
            var pathParams = {name: name}
            if(item.appType=='1'){
              pathParams.query={appId:item.appId};
            }
            this.setSelecteKeys([item.key])
            pathParams.params = {menuId: item.id}
            this.setAppMenuId(pathParams.params.menuId)
            this.generatePath(item.id)
            item.params = pathParams.params
            this.$router.push(pathParams)
        },
        generatePath(id) {
            var aryMenuPath = this.getMenuPath(id)
            //将菜单路径发布到VUEX
            this.setMenuPath(aryMenuPath)
        },
        getMenuPath(id) {
            var aryMenuPath = []
            var obj = this.menuMap[id]
            aryMenuPath.push(obj)

            while (obj.parentId != '0') {
                obj = this.menuMap[obj.parentId]
                aryMenuPath.unshift(obj)
            }
            return aryMenuPath
        },
        //面包屑
        handNavBars(item) {

            for (var nav of this.navTabs) {
                if (nav.key == item.key) {
                    this.setActiveKey(item.key)
                    return
                }
            }
            this.setActiveKey(item.key);

            this.navigation[this.frontType].push(item);

        },
    },
}
</script>

<style scoped>
.spanlist {
    width: 100%;
    display: block;
    text-align: center;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.itmsFont {
    background-color: white;
    width: calc(100% - 20px);
    margin: auto;
    border-radius: 6px;
    margin-top: 10px;
    padding: 10px;
}

.ithear {
    width: 100%;
    overflow: hidden;
    height: 42px;
    border-bottom: 1px solid #eef2f4;
}

.ithear li {
    float: left;
    height: 40px;
    line-height: 40px;
    margin-right: 20px;
    cursor: pointer;
}

.hoverli {
    color: #1890ff;
    border-bottom: 2px solid #1890ff;
}

.item-cong {
    width: 100%;
    overflow: hidden;
    background-color: white;
}

.item-li {
    width: 100px;
    margin-top: 10px;
    border-radius: 6px;
    margin-right: 15px;
    position: relative;
    background: white;
    border: 1px solid white;
    float: left;
}

.item-li:hover {
    border: 1px solid #4D9EFF;
    top: -2px;
    box-shadow: 0 6px 18px 2px #e0e5e7;
}

.item-li:nth-child(6n + 6) {
    margin-right: 0;
}

.item-li p {
    font-size: 14px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-height: 42px;
}

.itmsFont .item-li p > span {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.item-li p:before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}

.item-icon-box {
    width: 60px;
    height: 60px;
    margin: auto;
    text-align: center;
    border-radius: 50%;
    background: #09bcb9;
    color: white;
    margin-top: 15px;
}

.item-icon-box i {
    font-size: 30px;
    line-height: 60px;
}

.item-li:nth-child(1) .item-icon-box {
    background-color: #0595fe;
}

.item-li:nth-child(2) .item-icon-box {
    background-color: #458bff;
}

.item-li:nth-child(3n) .item-icon-box {
    background-color: #09bcb9;
}

.item-li:nth-child(4n) .item-icon-box {
    background-color: #76d32c;
}

.item-li:nth-child(5n) .item-icon-box {
    background-color: #f0cb39;
}
</style>